<template>
  <Panel title="信息脱敏能力" class="panel">
    <div class="df">
      <div>
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose">
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span @click="rou" slot="title">数据脱敏</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-document"></i>
            <span @click="rou2" slot="title">脱敏规则</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-setting"></i>
            <span @click="rou3" slot="title">数据分类</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span @click="rou4" slot="title">数据分级</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="f1">
         <el-breadcrumb separator-class="el-icon-arrow-right" >
          <el-breadcrumb-item :to="{ path: '/callermanagement/callermanagement5' }">数据库脱敏</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/callermanagement/callermanagement6' }">结果查询</el-breadcrumb-item>
          <el-breadcrumb-item>数据库操作审计</el-breadcrumb-item>
         </el-breadcrumb>
          <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              label="日期"
              width="180">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="姓名"
              width="180">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>姓名: {{ scope.row.name }}</p>
                <p>住址: {{ scope.row.address }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.name }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
    </div>
  </Panel>
</template>

<script>
import Panel from "@/components/panel/Panel";

export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  components: {
    Panel,
  },
  methods: {
    rou() {
      this.$router.push(
          {
            path: '/callermanagement/callermanagement'
          }
      )
    },
    rou2() {
      this.$router.push(
          {
            path: '/callermanagement/callermanagement2'
          }
      )
    },
    rou3() {
      this.$router.push(
          {
            path: '/callermanagement/callermanagement3'
          }
      )
    },
    rou4() {
      this.$router.push(
          {
            path: '/callermanagement/callermanagement4'
          }
      )
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }, handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
}
</script>

<style lang="less" scoped>

</style>
